Conversation
Turito
force-pushed
the
feat/xds-button-component
branch
2 times, most recently
from
0353a00 to
06e69fe
Compare
Turito
force-pushed
the
feat/xds-button-component
branch
from
06e69fe to
120c592
Compare
| @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap; | ||
| @apply xds:border-1 xds:border-solid xds:cursor-pointer; | ||
| @apply xds:font-family-main xds:font-bold; | ||
| @apply xds:text-neutral-0 xds:bg-neutral-90 xds:border-neutral-90; |
There was a problem hiding this comment.
I miss these two properties
boxSizing: 'border-box',
letterSpacing: theme('x.letterSpacing.md'),
| &:active { | ||
| @apply xds:bg-neutral-90 xds:border-neutral-90; | ||
| } | ||
| } |
There was a problem hiding this comment.
I propuse you add custom variants to achieve it.
@custom-variant selected (&.xds\:selected);
@custom-variant hover-active (&:hover,&:active);
With the first, we encapsulate our custom state selected under a single line dependency. You can use it as @variant selected.
And the second one, as it is common applying styles for both hover and active state, I think is it clearer. You can use it as @variant hover-active
| } | ||
|
|
||
| &:disabled { | ||
| @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed; |
There was a problem hiding this comment.
Leave xds:cursor-not-allowed in a single @apply
| &:disabled { | ||
| @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed; | ||
|
|
||
| &:hover, |
There was a problem hiding this comment.
This selector must be selected, mustn't it? Because it
'&.x-selected': {
...disabledStyles,
},
And xds:cursor-not-allowed is not added here in the old design system
| @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm; | ||
| } | ||
| @utility button-lg { | ||
| @apply xds:min-h-48 xds:gap-8 xds:ps-20 xds:pe-20 xds:text-sm; |
| @apply xds:min-h-0 xds:ps-0 xds:pe-0; | ||
| @apply xds:border-0 xds:underline xds:font-normal; | ||
| @apply xds:text-neutral-75 xds:bg-transparent; | ||
|
|
There was a problem hiding this comment.
Missing this also
'&:disabled': {
fontWeight: 'inherit',
},
| <Wrapper feature="Button" :rows="rows"> | ||
| <template #default> | ||
| <button class="xds:button"> | ||
| <span>button</span> |
| 'layout', | ||
| 'color', | ||
| 'default-selected', | ||
| 'outline', |
| 'color', | ||
| 'default-selected', | ||
| 'outline', | ||
| 'outline-selected', |
| selected tight {{ key }} button | ||
| </button> | ||
| </template> | ||
| <template #link> |
There was a problem hiding this comment.
Font weight (at least) in the demo doesn't seem the same
2 participants
Pull request template
Describe the purpose of the change, the specific changes done in detail, and the issue you have fixed.
Motivation and context
Type of change
What is the destination branch of this PR?
MainHow has this been tested?
Tests performed according to testing guidelines:
Checklist: